<template>
    <view class="fromCard">
        <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
        <u--form labelPosition="top" :model="userInfo" :rules="addressRules" ref="uFrom" label-width="120" :labelStyle="labelStyle">
            <u-form-item label="姓名" prop="name" ref="name">
                <u-input v-model="userInfo.name"></u-input>
            </u-form-item>
            <u-form-item label="联系电话" prop="phone" ref="phone">
                <u-input v-model="userInfo.phone"></u-input>
            </u-form-item>
            <u-form-item label="所在城市" prop="address" ref="address">
                <!-- <u-input v-model="userInfo.address"></u-input> -->
                <uni-data-picker
                    placeholder="请选择地址"
                    popup-title="请选择城市"
                    collection="opendb-city-china"
                    field="code as value, name as text"
                    orderby="value asc"
                    :step-searh="true"
                    self-field="code"
                    parent-field="parent_code"
                    @change="onchange"
                    v-model="userInfo.areaCode"
                ></uni-data-picker>
            </u-form-item>
            <u-form-item label="详细地址" prop="addressMsg" ref="addressMsg">
                <u-input v-model="userInfo.addressMsg"></u-input>
            </u-form-item>
            <u-form-item label="设为默认" prop="moren" ref="moren">
                <u-switch v-model="userInfo.moren"></u-switch>
            </u-form-item>
        </u--form>
        <view class="flex aic jcsb mgt20">
            <u-button text="提交" type="primary" class="mgr40" @click="submit"></u-button>
            <u-button text="重置" type="error"></u-button>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 样式
const labelStyle = {
    fontSize: '28rpx'
};
const userInfo = ref({
    name: '',
    phone: '',
    address: '',
    moren: false,
    areaCode: '',
    addressMsg: ''
});
const addressRules = reactive({
    name: [
        {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change']
        },
        {
            min: 2,
            max: 8,
            message: '姓名长度不合法',
            trigger: ['blur', 'change']
        }
    ],
    phone: [
        {
            type: 'number',
            required: true,
            message: '请填写电话号码',
            trigger: ['blur', 'change']
        }
    ],
    address: [
        {
            type: 'string',
            required: true,
            message: '请填写地址',
            trigger: ['blur', 'change']
        }
    ]
});

// 使用 ref 创建响应式引用
const uFrom = ref(null);
// 定义方法
const addressObj = uniCloud.importObject('mall-address');
function submit() {
    uFrom.value
        .validate()
        .then(async () => {
            let tip = '';
            //新增
            if (!id.value) {
                let result = await addressObj.add(userInfo.value);
                if (!result) {
                    uni.navigateTo({
                        url: '#'
                    });
                }
                tip = '新增成功';
            } else {
                console.log(userInfo.value);
                //修改
                let updateRes = await addressObj.updateOne(userInfo.value);
                tip = '修改成功';
                console.log(updateRes);
            }
            uni.showToast({
                title: tip,
                icon: 'none'
            });
            setTimeout(() => {
                uni.navigateBack();
            }, 1000);
        })
        .catch((err) => {
            uni.$u.toast('校验失败');
        });
}
const onchange = (e) => {
    userInfo.value.address = e.detail.value.map((i) => i.text).join('');
};
//获取修改数据
const getAddress = async () => {
    let res = await addressObj.getOne(id.value);
    userInfo.value = res.data[0];
};
let id = ref('');
onLoad((e) => {
    if (e.id) {
        id.value = e.id;
        getAddress();
    }
});
</script>

<style lang="scss" scoped>
.fromCard {
    background-color: #fff;
    height: 90vh;
    box-sizing: border-box;
    padding: 50rpx;
}
</style>